PostCategoryAbout Me

FrontEnd 유닛테스트 어떻게 작성할까?

TestCodeUnitTest

FrontEnd 테스트코드 (전지적 주니어의 관점..)

  • 요즘 시간적 여유가 생겨서 회사에서 프론트엔드 유닛테스트를 조금씩 작성해보고 있다. 하지만 내가 정확히 테스트코드를 이해하고 작성하는지에 대한 의문도 들었고 아직 익숙하지 않아서 생각보다 어려움을 겪고 있다. ㅋㅋ 이 시점에서 나는 테스트코드가 무엇이고 어떤종류들이 있는지는 그럼 왜 작성하는지와 어떤 순서로 작성하면 좋을지에 대한 정리가 필요할 것 같다.
  • 우선 단순하게 3개 정도로 분리하면 시각적 요소, 이벤트 처리, API 정도로 분리할 수 있을것 같은데 각각 어떤 방식으로 하면 좋을까?

크게본 3가지 요소

  • 시각적 요소

    • HTML 의 구조가 의도한 대로 나타나는지 테스트를 위해서 스냅샷 테스트를 수행하는게 좋다. 보통 HTML + CSS를 컴포넌트가 실제 브라우저에서 렌더링 되는 모습이 의도된 모습인지 테스트를 하려고 시각적 회귀 테스트를 수행한다. 여러가지 참고자료들을 참고하면서 모두 공감하는 부분은 많은 사람들이 기능적 회귀 테스트를 할때 이러한 기능의 테스트가 시각적 요소의 테스트까지 보장한다고 착각한다. 그래서 시각적 요소의 테스트가 필요하고 스냅샷 테스트에 사용되는 도구는 Jest가 대표적이고 시각적 회귀 테스트는 Storybook에서 만든 Chromatic이 존재한다. ( 멋지게도 회사에서 선임 개발자분들이 적용시켜 놓으셨다. :thumbsup: )

  • 이벤트 처리

    • 그냥 간단하게 마우스, 키보드 입력 이벤트를 적절한 이벤트 핸들러로 처리하는걸 테스트 하는건데 보통 이건 E2E테스트에서 많이 진행한다고 한다. React에서는 testing-library를 권장해서 많이들 사용하는데 Vue에서는 어떤식으로 할지 좀 찾아보면 좋을것 같다.

  • API

    • 실제 API 서버를 쓰는 방법이 있고 이 방법은 주로 E2E테스트에서 많이 사용함
    • 테스트 API 서버를 구축해서 하는 방법도 있다.
    • API client를 모킹해서 하는 방법이 있다. ( 제일 많이 사용되는것으로 보임 )
    • API client를 모킹하면 API 요청에 대한 응답을 원하는대로 수정할 수 있기 때문에 다양한 상황을 테스트 할 수 있다는 장점이 있다. Jest를 활용하면 모듈을 간단하게 모킹할 수 있어서 Jest사용을 React에서는 많이 권장하는것으로 보인다. Vue에서도 실제로 많이 사용됨 ( 제대로 사용하는 방법만 찾아보면 API 테스트도 쉽게 가능할 것 같다. )

우선 그렇다면?

  • unit test를 제대로 작성하는것이 우선 첫 번째 목표이기 때문에 우선 작은 scope로 잡고 작성하면서 확장시키면 좋을것 같다. 그리고 테스트코드 작성할때 제대로 생각하고 작성해야할 것 같다. 특히 아직 나처럼 익숙하지 않다면 매우 중요한 포인트일듯하다.

  • 이 코드의 테스트코드를 왜 작성하는가 ? ( ex. 이 함수의 예외처리 케이스가 너무 많이 존재하기 때문에 예상하지 못한 오류나 의도하지 않은 UI가 사용자에게 보여질 수 있다고 판단되었다. )

  • 그렇다면 무엇을 테스트 할 것인가? ( ex. 이 함수가 내가 의도한대로 예외처리 케이스가 제대로 작동하는지와 그것이 UI로도 잘 나타나는지를 확인하고싶다. )

  • 그럼 어떤식으로 테스트 하려고 하는가? ( ex. 우선 해당 컴포넌트의 초기상태에서 첫 번째 default값이 UI에 잘 나오는지 확인하고 그 후에 각각의 예외케이스에 대하여 step by step으로 의도한대로 작동하는지 확인후 해당 값이 UI상에 재대로 나오는지 순서대로 모두 확인하면 될 것 같다. )

대충 입코딩으로 얘기하면

  1. 테스트하려는 컴포넌트 가져오기

  2. 테스트하려는 element에 원하는 초기값이 들어가있는지 확인

  3. 테스트하려는 함수를 불러와서 예외 케이스에 해당하는 상황만들고 원하는 값이 나오는지 확인

  4. 원하는 값이 나오면 UI에도 그게 제대로 출력되는지 확인

  5. 예외케이스들을 3-4까지 반복

  6. 모두 잘 작동한다면 완료

  • 하지만 사실 4~5가지 유닛테스트를 한 번에 하려고 하는것이고 순차적으로 모두 확인하는것이기 때문에 이건 unit test보다는 behavior test에 더 가깝다고 보여진다. 물론 내가 익숙하고 숙달된 상황이라면 이걸 빠르게 작성하고 좋겠지만, 그렇지 않은 상황이기도하고 이걸 깔끔하게 잘 작성할 자신도 없는 상태이고 그러면 다른 개발자분이 봤을때 시간을 빼았을수 있는 테스트코드이기 때문에 우선은 최대한 unit-test 위주로 작성해가면서 연습해보는게 우선이라고 생각되어서 결론은 우선 unit test 작성부터 제대로하고 내가 이걸 왜 작성하고 필요한지와 어떤걸 테스트할지를 작성전에 항상 생가하고 작성하도록 해야겠다.